<form nz-form [formGroup]="validateForm">
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>产品</nz-form-label>
        <nz-form-control [nzSm]="16" [nzXs]="24">
          <nz-select [formControlName]="'productId'" nzShowSearch>
            <nz-option nzValue="" nzLabel="请选择"></nz-option>
            <nz-option [nzValue]="p.pid" [nzLabel]="p.productName" *ngFor="let p of allProducts"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>schema</nz-form-label>
        <nz-form-control>
          <input nz-input placeholder="schema" [formControlName]="'schemaName'"/>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col [nzSpan]="6" class="copy-tip">点击标题复制sql id</div>
    <div nz-col [nzSpan]="6" class="search-area">
      <button nz-button (click)="search()">Search</button>
      <button nz-button (click)="resetForm()">Clear</button>
    </div>
  </div>
</form>
<div class="table-div">
  <nz-table #smallTable [nzData]="sqlList" nzSize="small" [nzFrontPagination]="false" nzShowSizeChanger
            [nzShowTotal]="totalTemplate"
            [nzTotal]="total" [(nzPageIndex)]="current" [(nzPageSize)]="pageSize" [nzShowPagination]="true"
            [nzLoading]="loading" [nzLoadingDelay]="300"
            (nzPageIndexChange)="search()" (nzPageSizeChange)="search()" [nzPageSizeOptions]="pageSizes"
            nzShowQuickJumper [nzScroll]="{ y: 'calc(100vh - 310px)' }">
    <thead>
    <tr>
      <th>sql标题</th>
      <th>序号</th>
      <th>schema</th>
      <th>产品</th>
      <th>创建人</th>
      <th>创建时间</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of smallTable.data">
      <td (click)="copyId(data.pid)">{{ data.sqlTitle }}</td>
      <td>{{ data.sqlOrder }}</td>
      <td>{{ data.schemaName }}</td>
      <td>{{ data.productName }}</td>
      <td>{{ data.createName }}</td>
      <td>{{ data.createTime | shortTime }}</td>
      <td>
        <button nz-button nzType="link" nzSize="small" (click)="moveOneSql(data)">
          <i nz-icon nzType="swap" nzTheme="outline"></i>移动
        </button>
        <button nz-button nzType="link" nzSize="small" routerLink="./preview" [queryParams]="{pid:data.pid}">
          <i nz-icon nzType="info-circle" nzTheme="outline"></i>查看
        </button>
      </td>
    </tr>
    </tbody>
  </nz-table>
  <ng-template #totalTemplate let-total> 一共 {{ total }} 条数据</ng-template>
</div>

<nz-modal [nzVisible]="isVisible" (nzOnCancel)="dialogCancel()" [nzWidth]="'800px'"
          [nzTitle]="'将'+selected?.sqlTitle+'移动到'" [nzFooter]="nzModalFooter"
          [nzBodyStyle]="{ height: '500px',overflow:'auto',width:'100%' }">
  <ng-container *nzModalContent>

    <div nz-row>
      <div nz-col [nzSm]="24" [nzXs]="24">
        <nz-form-item>
          <nz-form-label>SQL ID</nz-form-label>
          <nz-form-control>
            <input nz-input placeholder="SQL ID" [(ngModel)]="targetId"/>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row *ngIf="targetSql?.pid === selected?.pid">
      <div nz-col [nzXs]="24">
        <nz-alert nzType="warning" nzMessage="移动的sql不能和目标sql相同" nzShowIcon></nz-alert>
      </div>
    </div>
    <div nz-row *ngIf="targetSql">
      <div nz-col [nzXs]="24" [nzSm]="24">
        <nz-descriptions [nzTitle]="targetSql.sqlTitle" nzBordered [nzSize]="'small'">
          <nz-descriptions-item nzTitle="schema">{{targetSql.schemaName}}</nz-descriptions-item>
          <nz-descriptions-item nzTitle="产品">{{targetSql.productName}}</nz-descriptions-item>
          <nz-descriptions-item nzTitle="创建人">{{targetSql.createName}}</nz-descriptions-item>
          <nz-descriptions-item nzTitle="备注" [nzSpan]="3">{{targetSql.remark}}</nz-descriptions-item>
          <nz-descriptions-item nzTitle="SQL" [nzSpan]="3">
            <div [nzSm]="24" [nzXs]="24" nz-col class="sql-text-div" #editor>
            </div>
          </nz-descriptions-item>
        </nz-descriptions>
      </div>
    </div>
    <div nz-row *ngIf="!targetSql">
      <div nz-col [nzXs]="24">
        <nz-alert nzType="warning" nzMessage="未找到目标sql" nzDescription="您可以先点击目标sql的标题复制其ID" nzShowIcon></nz-alert>
      </div>
    </div>

  </ng-container>
</nz-modal>

<ng-template #nzModalFooter>
  <button nz-button nzType="default" (click)="dialogCancel()">取消</button>
  <button nz-button nzType="primary" (click)="confirmMove()" [disabled]="!targetSql || targetSql.pid===selected.pid"  >确定
  </button>
</ng-template>

